<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":">
            <el-form-item label="平均播放" prop="video_avg_time_watched_actions">
                <el-input v-model.trim="model.video_avg_time_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="两秒播放" prop="video_continuous_2_sec_watched_actions">
                <el-input v-model.trim="model.video_continuous_2_sec_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="30秒播放" prop="video_30_sec_watched_actions">
                <el-input v-model.trim="model.video_30_sec_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="播放时长次数" prop="video_time_watched_actions">
                <el-input v-model.trim="model.video_time_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="25%播放" prop="video_p25_watched_actions">
                <el-input v-model.trim="model.video_p25_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="50%播放" prop="video_p50_watched_actions">
                <el-input v-model.trim="model.video_p50_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="100%播放" prop="video_p100_watched_actions">
                <el-input v-model.trim="model.video_p100_watched_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="0-15s留存" prop="video_play_retention_0_to_15s_actions">
                <el-input v-model.trim="model.video_play_retention_0_to_15s_actions" clearable style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="20-60s留存" prop="video_play_retention_20_to_60s_actions">
                <el-input v-model.trim="model.video_play_retention_20_to_60s_actions" clearable style="width: 100%"></el-input>
            </el-form-item>

            <!-- <el-form-item label="视频上传" prop="">
                <el-upload
                    class="upload-demo"
                    drag
                    :before-upload="handleBeforeUpload"
                    :action="uploadImgUrl"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">支持PNG/JPG/MOV/MP4等格式</div>
                </el-upload>
            </el-form-item> -->
            
        </el-form>
    </el-dialog>
</template>

<script>
import { DetailExpert } from '@/api/advertisement'
export default {
    name: 'ExpertDetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        category: {
            type: String,
            default: '1',
        }
    },
    data() {
        return {
            // uploadImgUrl: process.env.VUE_APP_BASE_API + '/api/UploadGoogle/uploadVideo', // 上传的图片服务器地址
            uploadImgUrl: 'https://shopify.fan-zhou.com/api/UploadGoogle/uploadVideo', // 上传的图片服务器地址
            model: {
                id: '',
                title: '',
            },
            rules: {},
            dict: { },
            save: false,
            list: []
        }
    },
    computed: {
        title() {
            return `视频明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                // if (val.kpop_code) {
                    this.getDetail()
                // }
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {},
    methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            const isAllowedType = file.type === 'image/png' || file.type === 'video/mp4';
            if (!isAllowedType) {
                this.$message.error(`${file.type} 格式不支持！`);
                return false; // 阻止后续操作
            }
            return true
        },
        getDetail() {
            this.loading = true
            console.log('this.params',this.params);
            const params = { kpop_code: this.params.kpop_code }
            DetailExpert(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    // this.model.status = res.status === 'normal' ? 1 : 0
                })
                .finally(() => {
                    this.loading = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>

</style>
